<template>
  <div class="filter-result">
    <div class="breadcrumb-link">
      <span @click="fallBack" style="cursor: pointer;">Search Criteria</span>
      <i class="el-icon-arrow-right"></i>
      <span>Search Results</span>
    </div>
    <el-card class="select-module">
      <div class="select-box">
        <h3 style="margin:10px; padding: 0; font-size: 16px; font-family: 'Helvetica Neue'"></h3>
        <el-collapse-transition>
          <div class="select-content" v-show="selectState">
            <el-row>
              <el-col :span="24">
                <div class="content-box"
                     v-if="conditionParams.authority_geo || conditionParams.sell_in_region || conditionParams.sell_in_country">
                  <span class="tag-title">Geography:</span>
                  <!--情况一-->
                  <el-tag v-if="conditionParams.authority_geo" closable @close="clearSearch('authority_geo')">
                    GEO {{conditionParamsOpt.geoOpt}}{{conditionParams.authority_geo.value}}
                  </el-tag>
                  <!--情况二-->
                  <el-tag v-if="conditionParams.sell_in_region" closable @close="clearSearch('sell_in_region')">
                    Region {{conditionParamsOpt.regionOpt}}{{conditionParams.sell_in_region.value}}
                  </el-tag>
                  <el-tag v-if="conditionParams.sell_in_country" closable @close="clearSearch('sell_in_country')">
                    Country {{conditionParamsOpt.countryOpt}}{{conditionParams.sell_in_country.value}}
                  </el-tag>
                  <!--<i class="iconfont icon-guanbi" @click="clearGeographySearch"></i>-->
                </div>
              </el-col>
              <el-col :span="24">
                <div class="content-box"
                     v-if="conditionParams.sold_to_group || conditionParams.sold_to || conditionParams.sold_to_name">
                  <span class="tag-title">Customer ID/Name:</span>
                  <!--情况一-->
                  <el-tag v-if="conditionParams.sold_to_group" closable @close="clearSearch('sold_to_group')">
                    Group Name {{conditionParamsOpt.groupOpt}}{{conditionParams.sold_to_group.value}}
                  </el-tag>
                  <!--情况二-->
                  <el-tag v-if="conditionParams.sold_to" closable @close="clearSearch('sold_to')">
                    Customer ID {{conditionParamsOpt.bpIdOpt}}{{conditionParams.sold_to.value}}
                  </el-tag>
                  <el-tag v-if="conditionParams.sold_to_name" closable @close="clearSearch('sold_to_name')">
                    Customer Name {{conditionParamsOpt.bpNameOpt}}{{conditionParams.sold_to_name.value}}
                  </el-tag>
                  <!--<i class="iconfont icon-guanbi" @click="clearBpSearch()"></i>-->
                </div>
              </el-col>
              <el-col :span="24">
                <div class="content-box"
                     v-if="conditionParams.prod_unique_id || conditionParams.prod_sn || conditionParams.prod_machine_type">
                  <span class="tag-title">Product：</span>
                  <el-tag v-if="conditionParams.prod_unique_id" closable @close="clearSearch('prod_unique_id')">Product Unique ID
                    {{conditionParams.prod_unique_id.value}}
                  </el-tag>
                  <el-tag v-if="conditionParams.prod_sn" closable @close="clearSearch('prod_sn')">SN
                    {{conditionParams.prod_sn.value}}
                  </el-tag>
                  <el-tag v-if="conditionParams.prod_machine_type" closable @close="clearSearch('prod_machine_type')">Machine Type
                    {{conditionParams.prod_machine_type.value}}
                  </el-tag>
                  <!--<i class="iconfont icon-guanbi" @click="clearProductSearch()"></i>-->
                </div>
              </el-col>
            </el-row>
          </div>
        </el-collapse-transition>
        <div class="footer-icon" @click="selectStateChange">
          <i :class="[!selectState?'el-icon-caret-bottom':'el-icon-caret-top']"> {{!selectState?'Criteria':''}} </i>
        </div>
      </div>
    </el-card>
    <!--<el-row style="margin-top: 10px;position: relative;top: 10px">-->
    <!--<el-col :span="4" :offset="20">-->
    <!---->
    <!--</el-col>-->
    <!--</el-row>-->
    <div class="result-table">
      <div class="result-header">
        <div class="update-div">
          <el-button type="primary" @click="submitState">
            {{$t('filterResult.submit')}}
          </el-button>
        </div>
        <el-input v-model="filterTab.search" size="mini" placeholder="Global filter" style="width: 200px;margin-left: 20px"></el-input>
      </div>
      <ag-grid-vue
        v-loading="filterTab.tabLoading"
        style="width: 100%; height: calc(100vh - 280px);" class="ag-theme-balham"
        :gridOptions="transactionOptions"
        :enableColResize="true"
        :enableSorting="true"
        :enableFilter="true"
        :groupHeaders="false"
        :suppressRowClickSelection="true"
        :toolPanelSuppressGroups="false"
        :toolPanelSuppressValues="false">
      </ag-grid-vue>
      <div class="block f-r">
        <el-pagination
          @size-change="handleSizeChange3"
          @current-change="handleCurrentChange3"
          :current-page="conditionParams.page"
          :page-sizes="[100, 300, 500, 1000]"
          :page-size="filterTab.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="filterTab.total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import {getUsername, setFilterParams, getToken,getDataToolsFilterParams} from '../../utils/auth'
  import {mapGetters} from 'vuex'
  import {AgGridVue} from "ag-grid-vue";
  import HeaderStatusCode from "../../components/agGrid/HeaderStatusCode";
  import Vue from 'vue'

  export default {
    name: 'filterResult',
    components: {
      'ag-grid-vue': AgGridVue
    },
    data() {
      return {
        // 表名修改
        selectState:false,
        // tableName: 'cbi_document_flow & cbi_bp',
        tableName: '',
        cellEditStartValue:'',
        cellEditEndValue:'',
        transactionOptions: {
          postParams: [], //粘贴修改status comments的数据
          enableRangeSelection: true,
          rowSelection: 'multiple',
          context: {
            componentParent: this
          },
          onPasteStart: function (params) {
            this.postParams = []
            // console.log('Callback onPasteStart:' ,params);
          },
          onCellValueChanged: function (params) {
            console.log('onCellValueChanged');
            this.postParams.push({
              'serialNumber': params.data.prod_sn,
              'statusCode': params.data.statusCode,
              'statusComments': params.data.statusComments,
              'machineType': params.data.prod_material,
              // 'changeUser': getUsername(),
              'resourceFlag': 'cbi'
            })
          },
          onPasteEnd: async function (params) {
            const _this = this.context.componentParent;
            try {
              let res = await _this.changeStatus(this.postParams)
            } catch (err) {
              alert('修改失败，请刷新页面重试')
            }
            // console.log('Callback onPasteEnd:' ,params);
          },
          // 华
          onCellEditingStarted:async function(params){
            console.log('onCellEditingStarted');
            let _this=this.context.componentParent;
            _this.cellEditStartValue=params.node.data.statusComments
          },
          onCellEditingStopped: async function (params) {
            let _this = this.context.componentParent;
            _this.cellEditEndValue=params.node.data.statusComments;
            this.postParams = [
              {
                'serialNumber': params.node.data.prod_sn,
                'statusCode': params.node.data.statusCode,
                'statusComments': params.node.data.statusComments,
                'machineType': params.node.data.prod_material,
                // 'changeUser': getUsername(),
                'resourceFlag': 'cbi'
              }
            ]
            // let postParams = [
            //   {
            //     'serialNumber': params.node.data.prod_sn,
            //     'statusCode': params.node.data.statusCode,
            //     'statusComments': params.node.data.statusComments,
            //     'machineType': params.node.data.prod_material,
            //     // 'changeUser': getUsername(),
            //     'resourceFlag': 'cbi'
            //   }
            // ]
            // try {
            //   let res = await _this.changeStatus(postParams)
            // } catch (err) {
            //   console.log(err)
            //   alert('修改失败请重试')
            // }
          }
          // toolPanelSuppressRowGroups: true
        },
        activeColumn: '1',
//        customColumn: 1,
        toggle: '',
        params: {},
        // selectActiveNames: ['1'],
        selectActiveNames: ['0'],
        conditionParams: {},
        conditionParamsArr:[],
        conditionParamsOpt: {},
        // transaction权限控制
        filterTab: {
          permissions: {
            gp: false,
            gp_per: false,
            sdrev: false,
            bmc: false
          },
//          permissions: {
//            gp: true,
//            gp_per: true,
//            sdrev: true,
//            bmc: true
//          },
          tabLoading: true,
          filterTabData: [],
          search: '',
          page: null,
          total: null,
          pageSize: 100,
          currentPage: 1
        },
//原来的        tabHeight: window.innerHeight * 0.8,
        tabHeight: window.innerHeight * 0.7,
        // Time标志
        timeMarkDate: {
          billingDateMark: '',
          deliveryDateMark: '',
          soDateMark: '',
          serviceDateMark: ''
        },
        tableCheckbox: {
          showGp: false,
          showGp_per: false,
          showRevenue: false,
          showBmc: false,
          checkbox: {
            bpId: true,
            bpName: true,
            group: true,
            geo: true,
            region: true,
            country: true,
            industry: true,
            nielsonId: true,
            loyalty: true,
            bu: false,
            brand: false,
            productSeries: false,
            productFamily: false,
            material: false,
            sn: false,
            segment: false,
            so: false,
            billing: false,
            ca: true,
            revenue: true,
            gp: true,
            gp_per: true,
            bmc: true,
            // 新增
            billingItem: false,
            billingDate: false,
            distrChan: false,
            productGroup: false,
            billCreateDate: false,
            firstSell: false,
            materialDesc: false,
            countryName: false,
            productHierachy: false,
            businessGroup: false,
            pcaCost: false,
            dmu: false,
            fiscper: false,
            fisquar: false,
            deliveryNote: false,
            deliveryItem: false,
            deliveryDate: false,
            encryptSn: false,
            shipDate: false,
            arriveDate: false,
            soItem: false,
            oppId: false,
            oppItem: false,
            quotationNum: false,
            quotationItem: false,
            contractNum: false,
            contractItem: false,
            contractPrice: false,
            contractTotal: false,
            activationDate: false,
            activationCountry: false,
            activationProvince: false,
            activationCity: false,
            activationSource: false,
            activationQty: false,
            duration: false,
            isActivation: false,
            os: false,
            cpu: false,
            gpu: false,
            hardDiskDrive: false,
            memory: false,
            warStartDate: false,
            warEndDate: false
          },
          tableItem: {
            bpId: true,
            bpName: true,
            group: true,
            geo: true,
            region: true,
            country: true,
            industry: true,
            nielsonId: true,
            loyalty: true,
            bu: false,
            brand: false,
            productSeries: false,
            productFamily: false,
            material: false,
            sn: false,
            segment: false,
            so: false,
            billing: false,
            ca: true,
            billingItem: false,
            billingDate: false,
            distrChan: false,
            productGroup: false,
            billCreateDate: false,
            firstSell: false,
            materialDesc: false,
            countryName: false,
            productHierachy: false,
            businessGroup: false,
            pcaCost: false,
            dmu: false,
            fiscper: false,
            fisquar: false,
            deliveryNote: false,
            deliveryItem: false,
            deliveryDate: false,
            encryptSn: false,
            shipDate: false,
            arriveDate: false,
            soItem: false,
            oppId: false,
            oppItem: false,
            quotationNum: false,
            quotationItem: false,
            contractNum: false,
            contractItem: false,
            contractPrice: false,
            contractTotal: false,
            activationDate: false,
            activationCountry: false,
            activationProvince: false,
            activationCity: false,
            activationSource: false,
            activationQty: false,
            duration: false,
            isActivation: false,
            os: false,
            cpu: false,
            gpu: false,
            hardDiskDrive: false,
            memory: false,
            warStartDate: false,
            warEndDate: false
          }
        },
        postParams: [],
        itemsToUpdate: []
      }
    },
    methods: {
      selectStateChange(){
        if(this.conditionParamsArr.length!==0){
          this.selectState=!this.selectState
        }else {
          this.selectState=false
        }
      },
      createColumn() {
        const _this = this
        if (this.toggle === 'transaction') {
          this.transactionOptions.columnDefs = [
            {
              headerName: "",
              field: "selection",
              headerComponentParams: {
                width: 45,
                template:
                '<div class="ag-cell-label-container" role="presentation">' +
                '   <span ref="eText" class="ag-header-cell-text" role="columnheader"></span>' +
                '</div>'
              },
              pinned: 'left',
              // suppressResize: true,
              cellRenderer: this.gridSelectFunc,
              width: 45,
              headerCheckboxSelection: true,
              headerCheckboxSelectionFilteredOnly: true,
              checkboxSelection: true
              // checkboxSelection: function (params) {
              //   if (params.data.prod_biz_group == 'DCG') {
              //     return true
              //   }
              // }
            },
            {headerName: "SN", field: "prod_sn"},
            {headerName: "Machine Type", field: "prod_machine_type"},
            {headerName: "Product Unique ID", field: "prod_unique_id"},
            {
              headerName: "Sold To",
              field: "sold_to_id",
              tooltipField: "customname",
              enableRowGroup: true,
              enablePivot: true
            },
            {
              headerName: "Sold To Name",
              field: "sold_to_name",
              tooltipField: "customname",
              enableRowGroup: true,
              enablePivot: true
            },
            {headerName: "Geo", field: "sales_geography", enableRowGroup: true, enablePivot: true},
            {headerName: "Region", field: "customer_account_region", enableRowGroup: true, enablePivot: true},
            {headerName: "Country Name", field: "customer_account_country", enableRowGroup: true, enablePivot: true},
            {headerName: "Brand", field: "prod_brand_name", enableRowGroup: true, enablePivot: true},
            {headerName: "Prod Series", field: "prod_series_name", enableRowGroup: true, enablePivot: true},
            {headerName: "Prod Family", field: "prod_subser_name", enableRowGroup: true, enablePivot: true},
            {headerName: "Segment", field: "customer_segment", enableRowGroup: true, enablePivot: true},
            {
              headerName: "Distribution Channel",
              field: "distribution_channel",
              enableRowGroup: true,
              enablePivot: true
            },

            {headerName: "Prod Wty Base Start Date", field: "wty_start_date_min"},
            {headerName: "Prod Wty Base End Date", field: "wty_end_date_max"},
            {headerName: "End Customer", field: "customer_id"},
            {headerName: "End Customer Name", field: "customer_account_name"},
            {headerName: "End Customer Group", field: "customer_group_name"},
            {
              headerName: "Status Code",
              field: "statusCode",
              headerComponentFramework: HeaderStatusCode,
              pinned: 'right',
              editable: function (params) {
//                return params.data.prod_biz_group == 'DCG'
                return true
              },
              cellEditorSelector: function (params) {
                return {
                  component: 'agRichSelectCellEditor',
                  params: {values: ['', 'TM', 'TP', 'SM', 'DC', 'UK']}
                }
              },
              cellStyle: function (params) {
                if (params.data == undefined) {
                  return
                }
                if (true) {
                  return {cursor: 'text'}
                } else {
                  return {cursor: 'not-allowed'}
                }
              }
            },
            {
              headerName: "Status Comments",
              field: "statusComments",
              pinned: 'right',
              editable: function (params) {
//              return params.data.prod_biz_group == 'DCG'
                return true
              },
              cellStyle: function (params) {
                if (params.data == undefined) {
                  return
                }
                if (true) {
                  return {cursor: 'text'}
                } else {
                  return {cursor: 'not-allowed'}
                }
              }
            }
          ]
        }
      },
      methodFromParent(selectData) { // 获取表格icon对应的id
        this.changeStatusCodeData(selectData)
      },
      gridSelectFunc(params) {
        return ''
      },
      // 奇
      async submitState() {
        const _this = this;
        this.transactionOptions.api.stopEditing();//结束编辑
        this.itemsToUpdate = this.transactionOptions.api.getSelectedRows();
//        console.log(this.itemsToUpdate,'itemsToUpdateitemsToUpdate');
        if (!this.itemsToUpdate.length) {
          this.$alert(_this.$t('filterResult.tipsContent.needSelect'), _this.$t('filterResult.tips'), {
            confirmButtonText: _this.$t('filterResult.OK'),
            callback: action => {

            }
          });
          return false
        }
        // let postParams = []
//        let isDCG = this.itemsToUpdate.every(item => {
//          return item.prod_biz_group.toString() == 'DCG'
//        })

        let isEmptySn = this.itemsToUpdate.some(item => {
          return item.prod_sn === ''
        });
        if (false) {
          this.$alert(_this.$t('filterResult.tipsContent.notDCG'), _this.$t('filterResult.tips'), {
            confirmButtonText: _this.$t('filterResult.OK'),
            callback: action => {

            }
          });
          return false
        }

        if (isEmptySn) {
          this.$alert(_this.$t('filterResult.tipsContent.SNEmpty'), _this.$t('filterResult.tips'), {
            confirmButtonText: _this.$t('filterResult.OK'),
            callback: action => {

            }
          });
          return false
        }

        for (let i in this.itemsToUpdate) {
          this.postParams.push({
            'serialNumber': this.itemsToUpdate[i].prod_sn,
            'statusCode': this.itemsToUpdate[i].statusCode,
            'statusComments': this.itemsToUpdate[i].statusComments,
            'machineType': this.itemsToUpdate[i].prod_machine_type,
            // 'changeUser': getUsername(),
            'resourceFlag': 'cbi'
          })
        }
        // console.log('要传的参数')
        // console.log(this.postParams)
        let res = await this.changeStatus(this.postParams)
        // console.log(res)

        if (res.data.status === 200) {
          if (res.data.data.metaData.length === 0) {
            this.$alert(_this.$t('filterResult.tipsContent.noPermission'), _this.$t('filterResult.tips'), {
              confirmButtonText: _this.$t('filterResult.OK'),
              callback: action => {

              }
            })
          } else {
            this.$message({
              message: _this.$t('filterResult.tipsContent.submitSuccess'),
              type: 'success'
            });
          }
        } else {
          this.$message.error(_this.$t('filterResult.tipsContent.submitFailed'));
        }
        this.postParams = []
        this.itemsToUpdate = []
      },
      async changeStatusCodeData(selectData) {
        const _this = this
        // var itemsToUpdate = [];
        var itemsToReset = [];
        // console.log(this.gridOptions.api.getSelectedRows())
        // console.log(this.gridOptions.api.getSelectedNodes())
        this.transactionOptions.api.getSelectedRows().forEach(function (item, index) {
          item.statusCode = selectData;
        });
        // this.itemsToUpdate = this.transactionOptions.api.getSelectedRows()
        // // console.log(itemsToUpdate)
        // // let postParams = []
        // for (let i in this.itemsToUpdate) {
        //   this.postParams.push({
        //     'serialNumber': this.itemsToUpdate[i].prod_sn,
        //     'statusCode': this.itemsToUpdate[i].statusCode,
        //     'statusComments': this.itemsToUpdate[i].statusComments,
        //     'machineType': this.itemsToUpdate[i].prod_material,
        //     // 'changeUser': getUsername(),
        //     'resourceFlag': 'cbi'
        //   })
        // }
        // console.log(postParams)
        // try {
        //   let res = await this.changeStatus(postParams)
        //   this.transactionOptions.api.updateRowData({update: itemsToUpdate});
        // } catch (err) {
        //
        // }
        this.transactionOptions.api.updateRowData({update: this.itemsToUpdate})
        // this.transactionOptions.api.deselectAll()
      },
      changeStatus(postParams) {
        return new Promise(async (resolve, reject) => {
          try {
            let res = await this.axios.post('/filtersearch/modefyStutas.do', {json: postParams})
            resolve(res)
          } catch (err) {
            reject(err)
          }
        })
      },
      clearSearch(value) {
        this.filterTab.tabLoading = true
        const _this = this
        if (value) {
          for (var key in this.conditionParams) {
            if (value === key) {
              delete this.conditionParams[value];
              _this.conditionParamsArr=_this.conditionParamsArr.filter(item=>item!==value)
            }
          }
        }
        _this.conditionParamsArr.length===0?_this.selectState=false:null;
        this.axios.post('/statusupdate/filterSearch', this.conditionParams).then(response => {
          if (response.data.status === 200) {
            const resData = response.data.data
//            if (resData.data[0].gp) {
//              _this.filterTab.permissions.gp = true
//            }
//            if (resData.data[0].gp_per) {
//              _this.filterTab.permissions.gp_per = true
//            }
//            if (resData.data[0].sdrev) {
//              _this.filterTab.permissions.sdrev = true
//            }
//            if (resData.data[0].bmc) {
//              _this.filterTab.permissions.bmc = true
//            }
            if (resData.data[0].gross_profit) {
              resData.data.map(item => {
                item.gross_profit = item.gross_profit.toFixed(2)
              })
            }
            if (resData.data[0].gp_per) {
              // 对GP%的数据 做处理
              resData.data.map(item => {
                item.gp_per = (item.gp_per * 100).toFixed(2) + '%'
//                console.log(item.gp_per)
              })
            }
            _this.filterTab.filterTabData = resData.data
            _this.transactionOptions.api.setRowData(_this.filterTab.filterTabData)
            var allColumnIds = [] //设置表格自动撑开
            _this.transactionOptions.columnApi.getAllColumns().forEach(function (column) {
              allColumnIds.push(column.colId);
            })
            _this.transactionOptions.columnApi.autoSizeColumns(allColumnIds)
            _this.filterTab.page = resData.page
            _this.filterTab.total = resData.total
            _this.filterTab.tabLoading = false
//            _this.conditionParams = resData.condition
            // console.log('再次的conditionParams数据')
            // console.log(_this.conditionParams)
          }
        }).catch(error => {
          console.log(error)
          alert('获取数据失败，请刷新或重试')
        })
      },
      clearGeographySearch() {
        this.clearSearch('authority_geo')
        this.clearSearch('sell_in_region')
        this.clearSearch('sell_in_country')
      },
      clearBpSearch() {
        this.clearSearch('sold_to_group')
        this.clearSearch('sold_to')
        this.clearSearch('sold_to_name')
      },
      clearTagsSearch() {
        this.clearSearch('industry')
        this.clearSearch('nielsen_id ')
        this.clearSearch('loyalty')
        this.clearSearch('gp_size')
        this.clearSearch('cross_buy')
      },
      clearProductSearch() {
        this.clearSearch('prod_biz_group')
        this.clearSearch('prod_final_bu')
        this.clearSearch('product_brand')
        this.clearSearch('prod_brand')
        this.clearSearch('prod_family')
        this.clearSearch('prod_material')
        this.clearSearch('prod_sn')
        this.clearSearch('prod_machine_type')
      },
      clearTransactionSearch() {
        this.clearSearch('ebr_segment')
        this.clearSearch('sales_order_num')
        this.clearSearch('billing_num')
        this.clearSearch('sell_in_qty')
        this.clearSearch('gross_profit')
        this.clearSearch('gp_per')
        this.clearSearch('sdrev')
      },
      symbolChange(nVal) {
        if (nVal === 'eq') {
          return '='
        }
        if (nVal === 'neq') {
          return '≠'
        }
        if (nVal === 'gt') {
          return '>'
        }
        if (nVal === 'gte') {
          return '≥'
        }
        if (nVal === 'lt') {
          return '<'
        }
        if (nVal === 'lte') {
          return '≤'
        }
        if (nVal === 'notcontain') {
          return 'NOT CONTAIN'
        }
        if (nVal === 'contain') {
          return 'CONTAIN'
        }
        if (nVal === 'between') {
          return 'BETWEEN'
        }
        if (nVal === '') {
          return ''
        }
      },
      fallBack() {
        this.$router.go(-1)
      },
      loadFilterSearch() {
        const _this = this
        console.log('------------')
        this.axios.post('/statusupdate/filterSearch', _this.params).then(response => {
          if (response.data.status === 200) {
            const resData = response.data.data
            // console.log('这是跳转到filterSearch页后的数据')
            // console.log(resData)
            if (resData.data[0].gross_profit) {
              _this.filterTab.permissions.gp = true
              // resData.data.map(item => {
              //   item.gross_profit = item.gross_profit.toFixed(2)
              // })
            }
            if (resData.data[0].gp_per) {
              _this.filterTab.permissions.gp_per = true
              // 对GP%的数据 做处理
              resData.data.map(item => {
                item.gp_per = (item.gp_per * 100).toFixed(2) + '%'
              })
            }
            if (resData.data[0].sdrev) {
              _this.filterTab.permissions.sdrev = true
            }
            if (resData.data[0].bmc) {
              _this.filterTab.permissions.bmc = true
            }
            _this.filterTab.filterTabData = resData.data
            _this.transactionOptions.api.setRowData(_this.filterTab.filterTabData)
            var allColumnIds = [] //设置表格自动撑开
            _this.transactionOptions.columnApi.getAllColumns().forEach(function (column) {
              // 设置不自动撑开选择框
              if (column.colId !== 'selection') {
                allColumnIds.push(column.colId);
              }
            })
            _this.transactionOptions.columnApi.autoSizeColumns(allColumnIds)
            _this.filterTab.page = resData.page
            _this.filterTab.total = resData.total
            _this.filterTab.tabLoading = false
            _this.conditionParams = resData.condition;
            for(let key in _this.conditionParams){
              if (_this.conditionParams.hasOwnProperty(key)) {
                if(key!=='page'&&key!=='pageSize'&&key!=='tablename'&&key!=='username'){
                  _this.conditionParamsArr.push(key);
                }
              }
            }
            // console.log(_this.conditionParams, '******')
          }
        }).catch(error => {
          console.log(error)
          alert('获取数据失败，请刷新或重试')
        })
      },
      handleSizeChange3(val) {
        this.filterTab.tabLoading = true
//        this.params.pageSize = val
//        this.loadFilterSearch()
        this.conditionParams.page = 1;
        this.conditionParams.pageSize = val
        this.clearSearch()
      },
      handleCurrentChange3(val) {
        this.filterTab.tabLoading = true
//        this.params.page = val
//        this.loadFilterSearch()
        this.conditionParams.page = val
        this.clearSearch()
      },
      showTab(params) {
        if (params.tablename === 'transaction') {
          this.toggle = 'transaction'
        } else {
          // service条件下
          this.toggle = 'service'
        }
      },
      // 只搭配监听，转换标志
      timeMarkChange(nVal) {
        if (nVal === 'billing_year_fis' || nVal === 'delivery_gi_year_fis' || nVal === 'sales_order_create_year_fis' || nVal === 'create_year_fis') {
          return 'FY'
        } else if (nVal === 'billing_month_fis' || nVal === 'delivery_gi_month_fis' || nVal === 'so_fis_month' || nVal === 'sales_order_create_month_fis') {
          return 'FM'
        } else if (nVal === 'billing_quarter_fis' || nVal === 'delivery_gi_quarter_fis' || nVal === 'sales_order_create_quarter_fis' || nVal === 'create_quarter_fis') {
          return 'FQ'
        } else if (nVal === 'billing_year' || nVal === 'delivery_gi_year' || nVal === 'sales_order_create_year' || nVal === 'create_year') {
          return 'Year'
        } else if (nVal === 'billing_month' || nVal === 'delivery_gi_month' || nVal === 'sales_order_create_month' || nVal === 'create_month') {
          return 'Month'
        } else if (nVal === 'billing_week' || nVal === 'delivery_gi_week' || nVal === 'sales_order_create_week' || nVal === 'create_week') {
          return 'Week'
        } else if (nVal === 'billing_date' || nVal === 'delivery_gi_date' || nVal === 'sales_order_create_date' || nVal === 'createtime') {
          return 'Day'
        } else if (nVal === 'billing_quarter' || nVal === 'delivery_gi_quarter' || nVal === 'sales_order_create_quarter' || nVal === 'create_quarter_fis') {
          return 'Quarter'
        }
      },
      // 自选列
      showBpID(value) {
        this.tableCheckbox.tableItem.bpId = value
      },
      showBpName(value) {
        this.tableCheckbox.tableItem.bpName = value
      },
      showGroup(value) {
        this.tableCheckbox.tableItem.group = value
      },
      showGeo(value) {
        this.tableCheckbox.tableItem.geo = value
      },
      showRegion(value) {
        this.tableCheckbox.tableItem.region = value
      },
      showCountry(value) {
        this.tableCheckbox.tableItem.country = value
      },
      showIndustry(value) {
        this.tableCheckbox.tableItem.industry = value
      },
      showNielsonId(value) {
        this.tableCheckbox.tableItem.nielsonId = value
      },
      showLoyalty(value) {
        this.tableCheckbox.tableItem.loyalty = value
      },
      showBu(value) {
        this.tableCheckbox.tableItem.bu = value
      },
      showBrand(value) {
        this.tableCheckbox.tableItem.brand = value
      },
      showProductSeries(value) {
        this.tableCheckbox.tableItem.productSeries = value
      },
      showProductFamily(value) {
        this.tableCheckbox.tableItem.productFamily = value
      },
      showMaterial(value) {
        this.tableCheckbox.tableItem.material = value
      },
      showSn(value) {
        this.tableCheckbox.tableItem.sn = value
      },
      showSegment(value) {
        this.tableCheckbox.tableItem.segment = value
      },
      showSo(value) {
        this.tableCheckbox.tableItem.so = value
      },
      showBilling(value) {
        this.tableCheckbox.tableItem.billing = value
      },
      showCa(value) {
        this.tableCheckbox.tableItem.ca = value
      },
      showRevenue(value) {
        this.filterTab.permissions.sdrev = value
//        this.tableCheckbox.tableItem.revenue = value
      },
      showGp(value) {
        this.filterTab.permissions.gp = value
//        this.tableCheckbox.tableItem.gp = value
      },
      showGp_per(value) {
        this.filterTab.permissions.gp_per = value
//        this.tableCheckbox.tableItem.gp_per = value
      },
      showBmc(value) {
        this.filterTab.permissions.bmc = value
      },
      showBillingItem(value) {
        this.tableCheckbox.tableItem.billingItem = value
      },
      showBillingDate(value) {
        this.tableCheckbox.tableItem.billingDate = value
      },
      showDistrChan(value) {
        this.tableCheckbox.tableItem.distrChan = value
      },
      showProductGroup(value) {
        this.tableCheckbox.tableItem.productGroup = value
      },
      showBillCreateDate(value) {
        this.tableCheckbox.tableItem.billCreateDate = value
      },
      showFirstSell(value) {
        this.tableCheckbox.tableItem.firstSell = value
      },
      showMaterialDesc(value) {
        this.tableCheckbox.tableItem.materialDesc = value
      },
      showCountryName(value) {
        this.tableCheckbox.tableItem.countryName = value
      },
      showProductHiera(value) {
        this.tableCheckbox.tableItem.productHierachy = value
      },
      showBusinessGroup(value) {
        this.tableCheckbox.tableItem.businessGroup = value
      },
      showPcaCost(value) {
        this.tableCheckbox.tableItem.pcaCost = value
      },
      showDmu(value) {
        this.tableCheckbox.tableItem.dmu = value
      },
      showFiscper(value) {
        this.tableCheckbox.tableItem.fiscper = value
      },
      showFisquar(value) {
        this.tableCheckbox.tableItem.fisquar = value
      },
      showDeliveryNote(value) {
        this.tableCheckbox.tableItem.deliveryNote = value
      },
      showDeliveryItem(value) {
        this.tableCheckbox.tableItem.deliveryItem = value
      },
      showDeliveryDate(value) {
        this.tableCheckbox.tableItem.deliveryDate = value
      },
      showEncryptSn(value) {
        this.tableCheckbox.tableItem.encryptSn = value
      },
      showShipDate(value) {
        this.tableCheckbox.tableItem.shipDate = value
      },
      showArriveDate(value) {
        this.tableCheckbox.tableItem.arriveDate = value
      },
      showSoItem(value) {
        this.tableCheckbox.tableItem.soItem = value
      },
      showOppId(value) {
        this.tableCheckbox.tableItem.oppId = value
      },
      showOppItem(value) {
        this.tableCheckbox.tableItem.oppItem = value
      },
      showquotationNum(value) {
        this.tableCheckbox.tableItem.quotationNum = value
      },
      showQuotationItem(value) {
        this.tableCheckbox.tableItem.quotationItem = value
      },
      showContractNum(value) {
        this.tableCheckbox.tableItem.contractNum = value
      },
      showContractItem(value) {
        this.tableCheckbox.tableItem.contractItem = value
      },
      showContractPrice(value) {
        this.tableCheckbox.tableItem.contractPrice = value
      },
      showContractTotal(value) {
        this.tableCheckbox.tableItem.contractTotal = value
      },
      showActivationDate(value) {
        this.tableCheckbox.tableItem.activationDate = value
      },
      showActivationCountry(value) {
        this.tableCheckbox.tableItem.activationCountry = value
      },
      showActivationProvince(value) {
        this.tableCheckbox.tableItem.activationProvince = value
      },
      showActivationCity(value) {
        this.tableCheckbox.tableItem.activationCity = value
      },
      showActivationSource(value) {
        this.tableCheckbox.tableItem.activationSource = value
      },
      showActivationQty(value) {
        this.tableCheckbox.tableItem.activationQty = value
      },
      showDuration(value) {
        this.tableCheckbox.tableItem.duration = value
      },
      showIsActivation(value) {
        this.tableCheckbox.tableItem.isActivation = value
      },
      showOs(value) {
        this.tableCheckbox.tableItem.os = value
      },
      showCpu(value) {
        this.tableCheckbox.tableItem.cpu = value
      },
      showGpu(value) {
        this.tableCheckbox.tableItem.gpu = value
      },
      showHardDiskDrive(value) {
        this.tableCheckbox.tableItem.hardDiskDrive = value
      },
      showMemory(value) {
        this.tableCheckbox.tableItem.memory = value
      },
      showWarStartDate(value) {
        this.tableCheckbox.tableItem.warStartDate = value
      },
      showWarEndDate(value) {
        this.tableCheckbox.tableItem.warEndDate = value
      }
    },
    watch: {
      // 表格名字
      'conditionParams.tablename': function (nVal) {
        if (nVal === 'transaction') {
          this.tableName = 'cbi_document_flow & cbi_bp'
        } else if (nVal === 'service') {
          this.tableName = 'services_claim & cbi_bp'
        }
      },

      'filterTab.search': function () {
        this.transactionOptions.api.setQuickFilter(this.filterTab.search)
      },
      'filterTab.permissions.gp': function (nVal) {
        this.tableCheckbox.showGp = true
        // console.log(1)
      },
      'filterTab.permissions.gp_per': function (nVal) {
        // console.log(2)
        this.tableCheckbox.showGp_per = true
      },
      'filterTab.permissions.sdrev': function (nVal) {
        this.tableCheckbox.showRevenue = true
        // console.log(3)
      },
      'filterTab.permissions.bmc': function (nVal) {
        this.tableCheckbox.showBmc = true
//        console.log(4)
      },
      'conditionParams.authority_geo.opt': function (nVal) {
        this.conditionParamsOpt.geoOpt = this.symbolChange(nVal)
      },
      'conditionParams.sell_in_region.opt': function (nVal) {
        this.conditionParamsOpt.regionOpt = this.symbolChange(nVal)
      },
      'conditionParams.sell_in_country.opt': function (nVal) {
        this.conditionParamsOpt.countryOpt = this.symbolChange(nVal)
      },
      'conditionParams.sold_to_group.opt': function (nVal) {
        this.conditionParamsOpt.groupOpt = this.symbolChange(nVal)
      },
      'conditionParams.sold_to.opt': function (nVal) {
        this.conditionParamsOpt.bpIdOpt = this.symbolChange(nVal)
      },
      'conditionParams.sold_to_name.opt': function (nVal) {
        this.conditionParamsOpt.bpNameOpt = this.symbolChange(nVal)
      },
      'conditionParams.industry.opt': function (nVal) {
        this.conditionParamsOpt.industryOpt = this.symbolChange(nVal)
      },
      'conditionParams.nielsen_id.opt': function (nVal) {
        this.conditionParamsOpt.nielsenIdOpt = this.symbolChange(nVal)
      },
      'conditionParams.loyalty.opt': function (nVal) {
        this.conditionParamsOpt.loyaltyOpt = this.symbolChange(nVal)
      },
      'conditionParams.gross_profit_scale.opt': function (nVal) {
        this.conditionParamsOpt.scaleOpt = this.symbolChange(nVal)
      },
      'conditionParams.cross_buy.opt': function (nVal) {
        this.conditionParamsOpt.crossBuyOpt = this.symbolChange(nVal)
      },
      'conditionParams.prod_biz_group.opt': function (nVal) {
        this.conditionParamsOpt.bgOpt = this.symbolChange(nVal)
      },
      'conditionParams.prod_final_bu.opt': function (nVal) {
        this.conditionParamsOpt.buOpt = this.symbolChange(nVal)
      },
      'conditionParams.prod_brand.opt': function (nVal) {
        this.conditionParamsOpt.brandOpt = this.symbolChange(nVal)
      },
      'conditionParams.prod_series.opt': function (nVal) {
        this.conditionParamsOpt.productSeriesOpt = this.symbolChange(nVal)
      },
      'conditionParams.prod_family.opt': function (nVal) {
        this.conditionParamsOpt.productFamilyOpt = this.symbolChange(nVal)
      },
      'conditionParams.prod_material.opt': function (nVal) {
        this.conditionParamsOpt.materialOpt = this.symbolChange(nVal)
      },
      'conditionParams.prod_sn.opt': function (nVal) {
        this.conditionParamsOpt.snOpt = this.symbolChange(nVal)
      },
      'conditionParams.ebr_segment.opt': function (nVal) {
        this.conditionParamsOpt.segmentOpt = this.symbolChange(nVal)
      },
      'conditionParams.sales_order_num.opt': function (nVal) {
        this.conditionParamsOpt.soOpt = this.symbolChange(nVal)
      },
      'conditionParams.billing_num.opt': function (nVal) {
        this.conditionParamsOpt.billingOpt = this.symbolChange(nVal)
      },
      'conditionParams.sell_in_qty.opt': function (nVal) {
        this.conditionParamsOpt.caOpt = this.symbolChange(nVal)
      },
      'conditionParams.gross_profit.opt': function (nVal) {
        this.conditionParamsOpt.gpOpt = this.symbolChange(nVal)
      },
      'conditionParams.gross_profit_percent.opt': function (nVal) {
        this.conditionParamsOpt.gp2Opt = this.symbolChange(nVal)
      },
      'conditionParams.sdrev.opt': function (nVal) {
        this.conditionParamsOpt.revenueOpt = this.symbolChange(nVal)
      },
      'conditionParams.billing_date.opt': function (nVal) {
        this.conditionParamsOpt.billingDateOpt = this.symbolChange(nVal)
      },
      'conditionParams.delivery_gi_date.opt': function (nVal) {
        this.conditionParamsOpt.deliveryDateOpt = this.symbolChange(nVal)
      },
      'conditionParams.sales_order_create_date.opt': function (nVal) {
        this.conditionParamsOpt.soDateOpt = this.symbolChange(nVal)
      },
      'conditionParams.createtime.opt': function (nVal) {
        this.conditionParamsOpt.serviceDateOpt = this.symbolChange(nVal)
      },

      'conditionParams.billing_date.tips': function (nVal) {
        this.timeMarkDate.billingDateMark = this.timeMarkChange(nVal)
      },
      'conditionParams.delivery_gi_date.tips': function (nVal) {
        this.timeMarkDate.deliveryDateMark = this.timeMarkChange(nVal)
      },
      'conditionParams.sales_order_create_date.tips': function (nVal) {
        this.timeMarkDate.soDateMark = this.timeMarkChange(nVal)
      },
      'conditionParams.createtime.tips': function (nVal) {
        this.timeMarkDate.serviceDateMark = this.timeMarkChange(nVal)
      }
    },
    beforeMount() {
      var str2 = getDataToolsFilterParams()
      this.params = JSON.parse(str2)
      this.params.page = this.filterTab.currentPage
      this.params.pageSize = this.filterTab.pageSize
      this.showTab(this.params)
      this.createColumn()
    },
    mounted() {
//      console.log(getFilterParams())
      console.log('这是filter传过来的搜索params')
      // console.log(this.params)
      this.loadFilterSearch()
    },
    computed: {
      ...mapGetters([
        'sidebar'
      ])
    }
  }

  function numSort(data1, data2) {
    var Number1 = parseFloat(data1) || data1
    var Number2 = parseFloat(data2) || data2
    if (!!Number1 === !!null && !!Number2 === !!null) {
      return 0
    }
    if (!!Number1 === !!null) {
      return -1
    }
    if (!!Number2 === !!null) {
      return 1
    }
    return Number1 - Number2
  }

  function moneyThousandth(params) {
    if (params.value == undefined) {
      return
    }
    // console.log(params.value)
    // return comdify(parseFloat(params.value).toFixed(2).toString())
    if (params.value.toString() == '0' || params.value.toString() == '') {
      return params.value.toString()
    } else {
      return comdify(parseFloat(params.value).toString())
    }
  }

  function comdify(n) {
    var re = /\d{1,3}(?=(\d{3})+$)/g;
    var n1 = n.replace(/^(^-?\d+)((\.\d+)?)$/, function (s, s1, s2) {

      return s1.replace(re, "$&,") + s2
    })
    return n1
  }
</script>

<style lang="scss" scoped>
  .column-icon {
    color: #959595;
    cursor: pointer;
    &:hover {
      color: #1E90FF;
      cursor: pointer;
    }
  }

  .column-title {
    h3 {
      cursor: pointer;
      margin: 0;
      padding: 0;
      padding-bottom: 10px;
      &:hover {
        color: #f33;
      }
    }
  }

  .column-content {
    padding-top: 10px;
  }

  .filter-result {
    overflow: hidden;
    padding:20px 35px 10px;
    .breadcrumb-link {
      color: #39f;
      margin-bottom: 10px;
      font-size: 14px;
      font-family: MicorsoftYaHei;
    }
    .select-module {
      padding: 10px 20px;
      /*transition: height 2s;*/
      .el-card__body{
        padding: 0;
      }
      .select-box{
        border: 1px solid #cccccc;
        border-radius: 6px;
        .select-content {
          padding: 15px 0;
          background-color: #efefef;
          color: #999;
          margin-bottom: 20px;
          .tag-title {
            display: inline-block;
            width: 120px;
            color: #010101;
            font-family: "Helvetica Neue";
            font-size: 14px;
            font-weight: bold;
            margin-left: 10px;
          }
          .el-tag{
            border: none;
            font-size:14px ;
            color: #999;
            font-family: "Helvetica Neue LTStd-ThCn";
            background-color: transparent;
            margin-left: 120px;
            &:nth-child(2) {
              margin-left: 0;
              padding-left: 0;
            }
          }
        }
      }
      .footer-icon {
        padding-bottom: 8px;
        text-align: center;
        cursor: pointer;
        font-size: 14px;
        font-family: MicorsoftYaHei;
        color: #ccc;
      }
    }
    .maincontainerclose {
      /*width: calc(100vw - 210px);*/
      width: calc(100vw - 200px);
      transition: transform 0.3s ease-in-out, left 0.3s ease-in-out, width 0.3s ease-in-out;
    }
    .mainContainerOpen {
      /*width: calc(100vw - 67px);*/
      width: calc(100vw - 47px);
      transition: transform 0.3s ease-in-out, left 0.3s ease-in-out, width 0.3s ease-in-out;
    }
    .selected {
      background: #fff;
      width: 100%;
      /*h3 {*/
      /*margin: 0;*/
      /*padding: 5px 0 5px 5px;*/
      /*color: #959595;*/
      /*}*/
      .icon-guanbi {
        color: #959595;
        font-size: 14px;
        cursor: pointer;
        margin-left: 5px;
      }
      .icon-guanbi:hover {
        color: #409EFF;
      }
      .el-col {
        div {
          /*  height: 40px;*/
          /*width: 92%;*/
          padding: 5px 10px;
          border: 1px solid #0090e9;
          border-radius: 10px;
          display: inline-block;
          /*display: block;*/
          line-height: 28px;
          margin-bottom: 10px;
          .el-tag {
            position: relative;
            /*top: -2px;*/
            font-size: 12px;
            min-height: 32px;
          }
        }
      }
    }
    .return {
      display: inline-block;
      font-size: 16px;
      float: right;
      cursor: pointer;
      color: #1e90ff;
      .icon-houtui {
        font-size: 20px;
      }
    }
    .filter-tag {
      margin-top: 50px;
      padding-top: 33px;
      background-color: #fff;
      .tag-title {
        padding: 0 2vw;
      }
      .tag {
        /*padding: 10px;*/
        padding: 10px 2vw;
      }

    }
    .result-table {
      position: relative;
      margin-top: 20px;
      .f-r {
        float: right;
        /*margin-top: 3vh;*/
        margin-top: 1vh;
        padding-bottom: 1vh;
      }
      .result-header{
        padding:20px 0;
        background: #ffffff;
        border-radius: 4px 4px 0 0;
        .update-div {
          display: inline-block;
          position: absolute;
          right: 15px;
          top: 20px;
          .el-button{
            font-size: 16px;
            padding:11px 25px;
          }
        }
      }
    }
    // 清除浮动，解决footer布局上浮混乱问题
    .result-table:after {
      display: block;
      content: '';
      clear: both;
    }

  }
</style>
